<ui:composition template="/layouts/default.xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:a4j="http://richfaces.org/a4j"
   xmlns:rich="http://richfaces.org/rich"
   xmlns:c="http://java.sun.com/jstl/core"
   xmlns:hc="http://www.halesconsulting.com/facelets">

<ui:define name="header">
   <style type="text/css">

      .column {
         width: 75px;
         font: normal 11px tahoma, sans-serif;
         text-align: center;
      }

      .column-index {
         width: 75px;
         font: normal 11px tahoma, sans-serif;
         text-align: left;
      }

      .list-row3 {
         background-color: #ececec;
      }

      .list-row1 {
         background-color: #f1f6fd;
      }

      .list-row2 {
         background-color: #fff;
      }

      .list-header {
         font: bold 11px tahoma, sans-serif;
         text-align: center;
      }

      .list-table1 {
         border: 1px solid #bed6f8;
      }

      .list-table2 {
         border: 1px solid #bed6f8;
      }

      #index-container {
         float: left;
         width: 120px;
      }

      #carList-container {
         float: left;
      }
   </style>


  
</ui:define>
<ui:define name="body">
   <ui:include src="modalHelp.xhtml"/>
   <a4j:form>

      <hc:modal modalId="loading-modal" modalContainerId="loading-modal-msg" hidden="true" width="129px">
         <img src="/seamtestapp/images/modal/loading.gif" alt=""/>
      </hc:modal>

      <a4j:outputPanel id="messages" ajaxRendered="true">
         <h:messages/>
      </a4j:outputPanel>
      <a4j:region id="stat1">

         <a4j:outputPanel id="list-body">
            <div id="index-container">
            <h:dataTable id="carIndex2"
                         rendered="#{inventoryList.carMakeIndex != null}"
                         rows="10"
                         binding="#{inventoryList.carMakeIndexUIData}"
                         value="#{inventoryList.carMakeIndex}"
                         var="category"
                         styleClass="list-table1"
                         columnClasses="column-index"
                         rowClasses="list-row3">

               <h:column >
                  <a4j:commandLink actionListener="#{inventoryList.filterCarList}"
                                   reRender="carList,scroller">
                     #{category}
                     <f:attribute name="filterRule" value="showTable"/>
                  </a4j:commandLink>
               </h:column>

            </h:dataTable>
            </div>

            <div id="carList-container">
               <rich:dataTable id="carList"
                               rows="10"
                               value="#{inventoryList.carInventory}"
                               var="category"
                               rowClasses="list-row1, list-row2"
                               columnClasses="column"
                               headerClass="list-header"
                               styleClass="list-table2">

                  <h:column>
                     <f:facet name="header">
                        <h:outputText styleClass="headerText" value="Make"/>
                     </f:facet>
                     <h:outputText value="#{category.make}"/>
                  </h:column>
                  <h:column>
                     <f:facet name="header">
                        <h:outputText styleClass="headerText" value="Model"/>
                     </f:facet>
                     <h:outputText value="#{category.model}"/>
                  </h:column>
                  <h:column>
                     <f:facet name="header">
                        <h:outputText styleClass="headerText" value="#{inventoryList.priceColumnName}"/>
                     </f:facet>
                     <h:outputText value="#{category.price}"/>
                  </h:column>
                  <h:column>
                     <f:facet name="header">
                        <h:outputText styleClass="headerText" value="#{inventoryList.mileageColumnName}"/>
                     </f:facet>
                     <h:outputText value="#{category.mileage}"/>
                  </h:column>
                  <f:facet name="footer">
                     <rich:datascroller id="scroller"/>
                  </f:facet>

               </rich:dataTable>
            </div>

         </a4j:outputPanel>

         <a4j:status for="stat1" forceId="true" id="ajaxStatus"
                     onstart="alertModal('loading-modal','loading-modal-msg');"
                     onstop="hideContentModal('loading-modal','loading-modal-msg');">
            <f:facet name="start">

            </f:facet>
         </a4j:status>


      </a4j:region>


   </a4j:form>

</ui:define>

</ui:composition>





